<template>
    <view class="registration-information">
        <header-vue :back="true" title="发布详情" titleSize="32rpx" titleColor="#333"></header-vue>
        <view class="form-card">
            <!-- 技能选择 -->
            <view class="form-item">
                <text class="label">技能选择</text>
                <view class="value" @click="onPickSkill" :style="readOnly ? 'pointer-events:none;opacity:.7' : ''">
                    <text class="placeholder">{{ selectedSkill || '请选择' }}</text>
                    <u-icon name="arrow-right" size="14" color="#999" />
                </view>
            </view>

            <!-- 姓名 -->
            <view class="form-item">
                <text class="label">姓名</text>
                <input class="input" v-model="formData.real_name" placeholder="请输入真实姓名" :disabled="readOnly" />
            </view>

            <!-- 年龄 -->
            <view class="form-item">
                <text class="label">年龄</text>
                <input class="input" v-model="formData.age" placeholder="请输入年龄" type="number" :disabled="readOnly" />
            </view>

            <!-- 性别 -->
            <view class="form-item">
                <text class="label">性别</text>
                <view class="gender-group">
                    <u-radio-group v-model="formData.gender" placement="row" :disabled="readOnly">
                        <u-radio 
                            name="1" 
                            label="男" 
                            :customStyle="{ marginRight: '40rpx' }"
                        ></u-radio>
                        <u-radio 
                            name="2" 
                            label="女"
                        ></u-radio>
                    </u-radio-group>
                </view>
            </view>

            <!-- 电话 -->
            <view class="form-item">
                <text class="label">电话</text>
                <input class="input" v-model="formData.phone" placeholder="请输入电话" type="number" :disabled="readOnly" />
            </view>

            <!-- 住址 -->
            <view class="form-item">
                <text class="label">住址</text>
                <input class="input" v-model="formData.address" placeholder="请输入住址" :disabled="readOnly" />
            </view>
        </view>

        <!-- 提示文字 -->
        <view class="tips-text">
            注:提交之后,会有工作人员尽快与您取得联系。请您耐心等待,避免重复多次提交
        </view>

        <!-- 提交按钮 -->
        <view class="submit-btn" v-if="!readOnly" @click="handleSubmit">
            提交
        </view>

         <!-- 技能选择弹层 -->
         <u-popup :show="showSkillPicker" mode="bottom" round="16" :closeable="true" @close="showSkillPicker = false">
            <view class="skill-picker">
                <view class="picker-title">选择技能</view>
                <view class="skill-list">
                    <view 
                        class="skill-item" 
                        v-for="skill in skillList" 
                        :key="skill.id"
                        @click="selectSkill(skill)"
                    >
                        {{ skill.name }}
                    </view>
                </view>
            </view>
        </u-popup>

        <!-- 审核不通过提示 -->
        <u-modal :show="rejectShow" title="审核不通过" :content="rejectMsg" confirmText="我知道了" @confirm="rejectShow=false"></u-modal>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import { getCraftsmanSkillList, postCraftsmanApplicationSubmit, getCraftsmanApplicationStatus,getCraftsmanApplicationList } from '@/api/index.js'
export default {
    name: 'release-dynamic',
    components: {
        headerVue,
    },
    data() {
        return {
            shStatus: null,
            formData: {
                real_name: '',
                age: '',
                gender: '1',
                phone: '',
                address: ''
            },
            selectedSkill: '',
            selectedId: '',
            showSkillPicker: false,
            skillList: [],
            rejectShow: false,
            rejectMsg: ''
        }
    },
    computed: {
        readOnly() { return this.shStatus !== 2 }
    },
    onLoad(options) {
        if (options && options.status !== undefined) {
            const s = Number(options.status)
            if (!Number.isNaN(s)) this.shStatus = s
        }
        this.fetchInitData()
    },
    methods: {
        async fetchInitData() {
            await this.fetchStatus()
            await this.fetchSkills()
            await this.fetchApplicationFirst()
        },
        async fetchStatus() {
            try {
                const res = await getCraftsmanApplicationStatus()
                if (res && typeof res.data?.status !== 'undefined') {
                    this.shStatus = res.data.status
                    if (this.shStatus === 2) {
                        // 审核不通过弹窗，原因从接口msg或data.msg获取
                        const msg = res.msg || res.data?.msg || '审核未通过'
                        this.rejectMsg = msg
                        this.rejectShow = true
                    }
                }
            } catch (e) {}
        },
        async fetchSkills() {
            try {
                const res = await getCraftsmanSkillList()
                if (res && res.errno == 0) this.skillList = res.data || []
            } catch (e) {}
        },
        async fetchApplicationFirst() {
            try {
                const res = await getCraftsmanApplicationList({ page: 1, pageSize: 1 })
                const first = (res && res.data && (res.data.list || res.data)[0]) || null
                if (first) {
                    this.formData.real_name = first.real_name || ''
                    this.formData.age = String(first.age || '')
                    this.formData.gender = String(first.gender || '1')
                    this.formData.phone = first.phone || ''
                    this.formData.address = first.address || ''
                    this.selectedId = first.skill.id || ''
                    this.selectedSkill = first.skill.name || ''
                }
            } catch (e) {}
        },
        onPickSkill() {
            if (this.readOnly) return
            this.showSkillPicker = true
        },
        selectSkill(skill) {
            if (this.readOnly) return
            this.selectedSkill = skill.name
            this.selectedId = skill.id
            this.showSkillPicker = false
        },
        validate() {
            if (!this.selectedId) return '请选择技能'
            if (!this.formData.real_name) return '请输入姓名'
            if (!this.formData.age) return '请输入年龄'
            if (!this.formData.phone) return '请输入电话'
            if (!this.formData.address) return '请输入住址'
            return ''
        },
        async handleSubmit() {
            if (this.readOnly) return
            const tip = this.validate()
            if (tip) return uni.showToast({ title: tip, icon: 'none' })
            const payload = { skill_id: this.selectedId, ...this.formData }
            const res = await postCraftsmanApplicationSubmit(payload)
            if (res && res.errno == 0) {
                uni.showToast({ title: '提交成功', icon: 'success' })
            } else {
                uni.showToast({ title: res?.msg || '提交失败', icon: 'none' })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.registration-information {
    width: 100%;
    min-height: 100vh;
    background: #f6f6f6;
}


.form-card {
    margin: 20rpx 32rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 0rpx 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
}

.form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
        border-bottom: none;
    }
}

.label {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
}

.value {
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.placeholder {
    font-size: 28rpx;
    color: #999;
}

.input {
    font-size: 28rpx;
    color: #333;
    text-align: right;
    flex: 1;
    max-width: 400rpx;
}

.gender-group {
    display: flex;
    align-items: center;
}

.tips-text {
    font-size: 24rpx;
    color: #999;
    line-height: 1.5;
    margin:0 32rpx 60rpx;
}

.submit-btn {
    height: 88rpx;
    margin: 0 32rpx;
    background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4rpx 20rpx rgba(7, 133, 207, 0.3);
}

.skill-picker {
    padding: 40rpx 30rpx;
    max-height: 600rpx;
}

.picker-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 30rpx;
}

.skill-list {
    max-height: 500rpx;
    overflow-y: auto;
}

.skill-item {
    padding: 30rpx 0;
    font-size: 28rpx;
    color: #333;
    text-align: center;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
        border-bottom: none;
    }
    
    &:active {
        background: #f8f8f8;
    }
}
</style>